<template>
  <header>
    <div ref="managediv" @click="gomanage()" :class="{ activecolor:active1 }">
      文章管理
    </div>
    <div @click="gopublish()" :class="{ activecolor:active2 }">文章发布</div>
  </header>

  <RouterView />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

const active1 = ref(true);
const active2 = ref(false);


let managediv = document.querySelector("header div") as HTMLElement;

// 去管理
function gomanage() {
  active1.value = true;
  active2.value = false;
  router.push("/");
}
// 去发布
function gopublish() {
  active2.value = true;
  active1.value = false;
  router.push("/publish");
}
</script>

<style scoped>
/* 头部 */
header {
  background-color: rgb(67, 74, 80);
  height: 70px;
  display: flex;
  align-items: center;
}
header div {
  width: 50%;
  text-align: center;
  font-size: 20px;
  color: aliceblue;
  cursor: pointer;
}
.activecolor {
  color: rgb(205, 96, 29);
}
</style>
